<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>大数据分析平台</title>
		<!--设置是否为缩放模式 -->
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<!-- 新 Bootstrap 核心 CSS 文件 -->

		<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>
		<!--echarts JS-->
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
		<!-- 轮播swiper文件 -->
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<script src="js/swiper.min.js"></script>
		<!--界面样式-->
		<script src="js/visual.js"></script>
		<script src="js/china.js"></script>
		<script src="js/chartMap.js"></script>
		<link rel="stylesheet" type="text/css" href="css/visual.css">
		<script src="js/liaoling.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script>-->
		<!--<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>-->

	</head>

	<body class="ksh">
		<!-- 加载动画 -->
		<!--<div id="load">
			<div class="load_img">
				
				<img class="jzxz1" src="images/jzxz1.png">
				<img class="jzxz2" src="images/jzxz2.png">
			</div>
		</div>-->
		<div class="head_top">
			<div class="header">
				<div class="bg_header">
					<div class="header_nav fl t_title">
						8890大数据服务平台
					</div>
				</div>
			</div>

		</div>
		<div class="visual">
			<div class="visual_left">
				<div class="visual_box">
					<div class="visual_title">
						<span>各地市办结量</span>
						<img src="images/ksh33.png">
					</div>
					<div class="visual_chart" id="main1" style="height:calc(100% - 35px);">

					</div>
				</div>
				<div class="visual_box">
					<div class="visual_title">
						<span>月累计办结量</span>
						<img src="images/ksh33.png">
					</div>
					<div class="visual_chart" id="main2"style="height:calc(100% - 35px);">

					</div>
				</div>
				<div class="visual_box">
					<div class="visual_title">
						<span>办结办理指数</span>
						<img src="images/ksh33.png">
					</div>
					<div class="visual_chart sfzcll">
						<a>类型</a>
						<a>具体数据</a>
						<div class="sfzcll_pos_box">
							<div class="sfzcll_box">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<label id="banjie"></label>
								<div class="sfzcll_smallBk">
									<div class="ygl" id="banjieVal">

									</div>
								</div>

								<div class="clear"></div>
							</div>
							<div class="sfzcll_box">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<label id="zongbanli"></label>
								<div class="sfzcll_smallBk">
									<div class="ygl" id="zongbanliVal">

									</div>
								</div>

								<div class="clear"></div>
							</div>
							<div class="sfzcll_box">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<img class="sfzcll_bkJk" src="images/ksh34.png">
								<label id="zongbanjie"></label>
								<div class="sfzcll_smallBk">
									<div class="ygl" id="zongbanjieVal">

									</div>
								</div>

								<div class="clear"></div>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="visual_con">

				<div class="visual_conBot">
					<img class="visual_conBot_l" src="images/ksh42.png">
					<img class="visual_conBot_2" src="images/ksh43.png">
					<img class="visual_conBot_3" src="images/ksh44.png">
					<img class="visual_conBot_4" src="images/ksh45.png">
					
					<div class="visual_chart" id="main8"></div>
					<div class="visual_conBot_bot"style="display: none;">
						<div class="visualSssf_left">
							<h3>今日实时数据</h3>
							<a style="display:block">全省数据</a>
							<a>沈阳市</a>
							<a>大连市</a>
							<a>鞍山市</a>
							<a>抚顺市</a>
							<a>本溪市</a>
							<a>丹东市</a>
							<a class="active">锦州市</a>
							<a>营口市</a>
							<a>阜新市</a>
							<a>辽阳市</a>
							<a>盘锦市</a>
							<a>铁岭市</a>
							<a>朝阳市</a>
							<a>葫芦岛市</a>
						</div>
						<div class="visualSssf_right">
							<div class="visualSssf_right_box" id="main5"></div>
							<div class="visualSssf_right_box" id="main6"></div>
							<div class="visualSssf_right_box" id="main7"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="visual_right">
				<div class="visual_box">
					<div class="visual_title">
						<span>前十问题及数据</span>
						<img src="images/ksh33.png">
					</div>
					<div class="swiper-container visual_swiper1 visual_chart" style="height:calc(100% - 15px);">
						<div class="swiper-wrapper">
							<div class="swiper-slide" id="main3" style="height:100%;"></div>
							<div class="swiper-slide" id="main31" style="height:100% ;"></div>
						</div>
					</div>
				</div>
				<div class="visual_box visualSfzsfl">
					<div class="visual_title">
						<span>各城市办理量</span>
						<img src="images/ksh33.png">
					</div>
					<div class="visual_chart" id="main9"style="height:calc(100% - 35px);">

					</div>
					
				</div>
				<div class="visual_box">
					<div class="visual_title">
						<span>月累计办理量</span>
						<img src="images/ksh33.png">
					</div>
					<div class="swiper-slide" id="main4"style="height:calc(100% - 35px);"></div>
					<div class="swiper-container visual_swiper2 visual_chart"style="display: none;">
						<div class="swiper-wrapper">
							
							<div class="swiper-slide" id="main41"style="display: none;"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<script type="text/javascript">


			$(function() {
				var a = $('.visualSssf_left a')
				for(var i = 0; i < a.length; i++) {
					a[i].index = i;
					a[i].onclick = function() {
						for(var i = 0; i < a.length; i++) {
							a[i].className = ''
						}
						this.className = 'active'
					}
				}

				var sfzcllH = $('.sfzcll_box').height()
				var sfzcllHtwo = sfzcllH - 2
				$('.sfzcll_box').css('line-height', sfzcllH + 'px')
				$('.sfzcll_smallBk>div').css('line-height', sfzcllHtwo + 'px')

				//删除加载动画
				$('#load').fadeOut(1000)
				setTimeout(function() {
					$('#load').remove()
				}, 1100);
			})

			//交通流量
			var myChart1 = echarts.init(document.getElementById('main1'));
//			myChart1.setOption(option1);
			//交通工具流量
			var myChart2 = echarts.init(document.getElementById('main2'));
//			myChart2.setOption(option2);
			//本月发生事件
			var myChart3 = echarts.init(document.getElementById('main3'));
			//			myChart3.setOption(option3);
			var myChart31 = echarts.init(document.getElementById('main31'));
			
			var mySwiper1 = new Swiper('.visual_swiper1', {
				autoplay: true, //可选选项，自动滑动
				speed: 800, //可选选项，滑动速度
				autoplay: {
					delay: 5000, //1秒切换一次
				},
			})
			
			
			var myChart8 = echarts.init(document.getElementById('main8'));
			myChart8.setOption(option8);
			//收费站收费量
			var myChart9 = echarts.init(document.getElementById('main9'));
//			myChart9.setOption(option9);

			//ajax
		</script>
	</body>

</html>